<?php
if (isset($this->error)) {
    echo $this->error;
    return;
}
$paymentSystem = RM_Environment::getInstance()->getPaymentSystem();
$plugins = $paymentSystem->getAllPlugins(true);
?>
<div class="RM_myreservations_pay_container">
    <div id="rm_myreservations_pay_summary"></div>
    <div id="rm_myreservations_pay_options">
    <form action="<?php echo RM_Environment::getInstance()->getRouter()->_('MyReservations_Pay', 'pay'); ?>" method="post" name="payform" id="payform">
        <input type="hidden" value="<?php echo $this->reservationID; ?>" name="reservationID" />
        <table cellpadding="5" cellspacing="5" width="100%">
        <?php foreach ($plugins as $plugin) {
            if ($plugin->name !== 'Paylater' && $plugin->name !== 'Deposit') {
                echo '<tr><td>'.$this->partial($plugin->name.'/select.phtml', array('plugin' => $plugin, 'default'=>1)).'</td></tr>';
            }
        } ?>
        <tr>
            <td class="payment_selection_row">
                <div class="payment_amount"><?php echo $this->_translate->_('User.MyReservations.Pay', 'AmountToPay'); ?>&nbsp;<?php echo $this->currencySymbol; ?>&nbsp;<input size="10" type="text" value="<?php echo $this->reservationDue; ?>" name="value" /></div>
                <span class="payment_button">
                <span class="RM_standard_button_1">
                    <button onclick="document.payform.submit()">
                        <img class="RM_standard_button_1_icon" src="<?php echo RM_Environment::getConnector()->getRootURL();?>RM/userdata/modules/MyReservations/images/credit-cards.png">
                            <span class="RM_standard_button_1_text">
                                <?php echo $this->_translate->_('User.MyReservations.Pay', 'ProceedToPayment'); ?>
                            </span>
                    </button>
                </span>
                </span>
            </td>
        </tr>        
        </table>        
    </form>
    </div>
</div>
<div class="RM_clear"></div>
<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();

    var reservationJson = <?php echo $this->reservationJson; ?>;

    var summaryTemplate = new Ext.XTemplate(
        '<table width="100%" border="0" cellpadding="3" cellspacing="0">',
        '<tr>',
        '<td class="RM_admin_table_header" width="30%">'+RM.Translate.Common.Unit+'</td>',
        '<td class="RM_admin_table_header" width="15%">'+RM.Translate.Common.StartDatetime+'</td>',
        '<td class="RM_admin_table_header" width="15%">'+RM.Translate.Common.EndDatetime+'</td>',
        '<td class="RM_admin_table_header" width="20%">&nbsp;</td>',
        '<td class="RM_admin_table_header" width="40%" align="left">'+RM.Translate.Common.Totals+'</td>',
        '</tr>',
        '<tpl for="prices">',
            '<tr>',
                '<td class="RM_admin_table_row">({[values.unit.id]}) {[values.unit.name]}</td>',
                '<td class="RM_admin_table_row">{[this.formatDate(values.reserved_period.start_date)]}</td>',
                '<td class="RM_admin_table_row">{[this.formatDate(values.reserved_period.end_date)]}</td>',
                '<td class="RM_admin_table_row">&nbsp;</td>',
                '<td class="RM_admin_table_row" align="left">{[values.total_sub]}</td>',
            '</tr>',
            '<tpl for="summary_rows">',
            '<tr>',
                '<td colspan="3" class="RM_admin_table_row">&nbsp;</td>',
                '<td class="RM_admin_table_row">{[values.name]}</td>',
                '<td class="RM_admin_table_row" align="left">{[values.total_amount]}</td>',
            '</tr>',
        '</tpl>',
        '</tpl>',
        '<tpl for="reservation_summary_rows">',
            '<tr>',
                '<td class="RM_admin_table_row" colspan="3">&nbsp;</td>',
                '<td class="RM_admin_table_row">{[values.name]}</td>',
                '<td class="RM_admin_table_row" align="left">{[values.total_amount]}</td>',
            '</tr>',
        '</tpl>',
        '<tr>',
            '<td class="RM_admin_table_row" colspan="3"></td>',
            '<td class="RM_admin_table_row">'+RM.Translate.User.MyReservations.Pay.ReservationTotal+'</td>',
            '<td class="RM_admin_table_row" align="left">{reservationTotal}</td>',
        '</tr>',
        '<tr>',
            '<td class="RM_admin_table_row" colspan="3"></td>',
            '<td class="RM_admin_table_row">'+RM.Translate.User.MyReservations.Pay.ReservationTotalPaid+'</td>',
            '<td class="RM_admin_table_row" align="left">{reservationTotalPaid}</td>',
        '</tr>',
        '<tr>',
            '<td class="RM_admin_table_row" colspan="3"></td>',
            '<td class="RM_admin_table_row">'+RM.Translate.User.MyReservations.Pay.ReservationTotalDue+'</td>',
            '<td class="RM_admin_table_row" align="left"><b>{reservationTotalDue}</b></td>',
        '</tr>',
        '</table>',
        {
            formatDate: function(MySQLDate){
                return RM.Common.ConvertToDate(MySQLDate).format(RM.Common.GUIDateFormat);
            }
        }
    );

    var summaryPanel = new Ext.Panel({
        id : "rm_myreservations_pay_summary_panel",
        renderTo: 'rm_myreservations_pay_summary'
    });

    summaryPanel.body.update(summaryTemplate.applyTemplate(reservationJson));
    summaryPanel.doLayout();
});
</script>